<script src="../../../shared/components/map-interaction/map-utils/mouse-position/mouse-position.component.ts"></script>
<div class="data-set-container">
    <div class="selector">
        <div class="left">
            <label>
                名称：
                <input type="text" nz-input placeholder="请输入地图数据集名称" [(ngModel)]="setName">
            </label>
            <label>
                公司名称：
                <input type="text" nz-input placeholder="请输入公司名称" [(ngModel)]="companyName">
            </label>
        </div>
        <div class="right">
            <button nz-button nzType="primary" (click)="getDataSet()">查询</button>
        </div>
    </div>
    <div class="list">
        <nz-table [(nzPageIndex)]="current"
                  [(nzPageSize)]="size"
                  [nzFrontPagination]="false"
                  (nzPageSizeChange)="getDataSet()"
                  (nzPageIndexChange)="getDataSet()"
                  [nzTotal]="total"
                  [nzShowQuickJumper]="true"
                  [nzShowTotal]="totalInfo"
                  nzBordered="true"
                  [nzData]="dataSet"
                  [nzLoading]="listLoading">
            <thead>
            <tr>
                <th>地图数据集名称</th>
                <th>公司名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let setItem of dataSet">
                <td>
                    <div class="editable-cell" *ngIf="editId !== setItem?.layersId; else editTpl" title="单击单元格以编辑地图集名称">
                        <div class="editable-cell-value-wrap" (click)="startEdit(setItem?.layersId, setItem, $event)">
                            {{ setItem.layersName }}
                        </div>
                    </div>
                    <ng-template #editTpl>
                        <input type="text" nz-input [(ngModel)]="setItem.layersName" (abort)="confirmChange($event)"/>
                    </ng-template>
                </td>
                <td>{{setItem.organizationName}}</td>
                <td>
                    <button nz-button class="no-border" (click)="downLoadSet(setItem)">下载</button>
                    <button nz-button class="no-border" nz-popconfirm nzTitle="确认为该数据集执行解绑操作吗？"
                            (nzOnConfirm)="unbind(setItem)">解绑
                    </button>
                    <button nz-button class="no-border" [routerLink]="['/home/front-page']"
                            [queryParams]="{layersId:setItem.layersId || '',operation: 'setDetails', layersName: setItem.layersName }">查看
                    </button>
                </td>
            </tr>
            </tbody>
        </nz-table>
        <ng-template #totalInfo let-number>
            共<span style="color:#f00"> {{number}} </span>条数据
        </ng-template>
    </div>
</div>
